<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			学生姓名：{{student.name}}
			学生成绩：<input type="text" v-model="student.score" />
			{{student.score}}<br />
			{{result}}
		</div>
		
		<script>			
			var app = Vue.createApp({
				data(){
					return {
						result: '',
						student: {
							name: "张三",
							score: 0
						}
					}
				},
				watch:{
					student:{
						deep: true,
						handler(newVal, oldVal){
							console.log(newVal)
							if(newVal.score >= 90){
								this.result = "优秀"
							}else if(newVal.score >= 80){
								this.result = "良好"
							}else if(newVal.score >= 70){
								this.result = "中等"
							}else if(newVal.score >= 60){
								this.result = "及格"
							}else{
								this.result = "不及格"
							}
						}
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

